<template>
  <div>
    <my-bread :list="['商品管理', '参数列表']"></my-bread>
    <el-card class="box-card">
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
      >
      </el-alert>
      <span>
        选择商品分类：

        <el-cascader
          v-model="selectedCateArr"
          :options="cascaderOptions"
          :props="cascaderProps"
          @change="handleChange"
          clearable
        ></el-cascader>
      </span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="success"
            :disabled="disabled"
            @click="openAddDialog()"
            >添加动态参数
          </el-button>
          <el-table :data="manyAttrs"
            ><el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag
                  closable
                  :key="item.attr_id"
                  v-for="(item, index) in scope.row.attr_vals"
                  @close="delAttrVals(scope.row, index)"
                >
                  {{ item }}
                </el-tag>
                <input
                  v-if="!scope.row.tagVisiable"
                  size="small"
                  :ref="'add_input_' + scope.row.attr_id"
                  class="input_btn"
                  v-model="scope.row.inputVal"
                  @blur="addAttrVals(scope.row)"
                />
                <el-tag
                  v-if="scope.row.tagVisiable"
                  class="add_btn"
                  @click="addTag(scope.row)"
                  disable-transitions
                >
                  <!-- disable-transitions 禁用动画-->
                  +添加tag
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="属性名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button
                  circle
                  type="primary"
                  icon="el-icon-edit"
                  @click="openEditDialog(scope.row)"
                ></el-button>
                <el-button
                  circle
                  type="danger"
                  icon="el-icon-delete"
                  @click="delParams(scope.row.attr_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only">
          <el-button
            type="success"
            :disabled="disabled"
            @click="openAddDialog()"
            >添加静态参数
          </el-button>
          <el-table :data="onlyAttrs">
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="属性名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="属性值">
              <template slot-scope="scope">
                <el-tag style="width:200px">
                  {{ scope.row.attr_vals }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button
                  circle
                  type="primary"
                  icon="el-icon-edit"
                  @click="openEditDialog(scope.row)"
                ></el-button>
                <el-button
                  circle
                  type="danger"
                  icon="el-icon-delete"
                  @click="delParams(scope.row.attr_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 1 添加动态和静态参数的弹出框 -->
    <el-dialog
      :title="activeName === 'many' ? '添加动态参数' : '添加静态参数'"
      :visible.sync="adddialogFormVisible"
    >
      <el-form
        ref="form"
        :rules="rules"
        label-width="80px"
        autocomplete="off"
        :model="form"
      >
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="form.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParams()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 2 编辑静态和动态属性的弹出框 -->
    <el-dialog
      :title="activeName === 'many' ? '编辑动态参数' : '编辑静态参数'"
      :visible.sync="editdialogFormVisible"
    >
      <el-form
        ref="editForm"
        :rules="rules"
        label-width="80px"
        autocomplete="off"
        :model="editForm"
      >
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="editForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParams()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "./Params-Mixin";
export default {
  mixins: [mixin]
};
</script>
<style lang="less" scoped>
span {
  display: block;
  margin-top: 10px;
}
.el-tag {
  display: inline-block;
  margin-right: 10px;
}
.input_btn {
  width: 100px;
}
.add_btn {
  width: 100px;
}
</style>
